<!--
  Generated template for the AllCoursePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="mainColor">
    <ion-title *ngIf="!showSearchBar">全部课程 </ion-title>
    <ion-searchbar
      placeholder="请输入关键词"
      [(ngModel)]="searchText"
      [showCancelButton]="false"
      *ngIf="showSearchBar"
    >
    </ion-searchbar>
    <ion-buttons *ngIf="!showSearchBar" end>
      <button ion-button icon-only (click)="showSearchBar = !showSearchBar">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons *ngIf="showSearchBar" end>
      <button ion-button  (click)="search()">
        搜索
      </button>
      <button ion-button icon-only (click)="showSearchBar = !showSearchBar">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="circles"  refreshingText="努力刷新数据中...">
    </ion-refresher-content>
  </ion-refresher>
  <ul>
    <li [class]="'bg-'+(i%3+1)"  *ngFor="let item of allCourseList;let i=index" (click)="showCourseDetails(item.id)">
      <div class="course-info">
        <p>
          {{item.class_name}}
        </p>
      </div>
      <div class="course-code">
        <div>
          <p>
            共{{item.unitCount}}单元
          </p>
        </div>
        <ion-icon name="arrow-forward"></ion-icon>
      </div>
    </li>
  </ul>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px" padding_bottom [px]="padding">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="加载更多">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
<continue (status)="padding = $event? 80 : 0"></continue>
